<template>
  <div class="data-lists-container">
    <h2 class="title">{{ title }}({{ data.total }})</h2>
    <ul class="lists-main">
      <li class="list-items" v-for="(item, index) in data.rows" :key="index">
        <div class="left-icon">
          <Avatar :src="item.avatar || defaultAvatar" :width="45"></Avatar>
        </div>
        <div class="right-content">
          <div class="top">
            <div class="nick-name">{{ item.nickname }}</div>
            <div class="time">{{ formDate(item.createDate, true) }}</div>
          </div>
          <div class="bottom-content">
            {{ item.content }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import Avatar from "@/components/Avatar/index.vue";
import defaultAvatar from "@/assets/default.gif";
import { defineProps } from "vue";
import { formDate } from "@/utils/tools";
const { data, title } = defineProps({
  data: {
    type: Object,
    default: {},
  },
  title: {
    type: String,
    default: "",
  },
});
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.data-lists-container {
  margin-top: 30px;

  .title {
    color: @words;
    font-size: 24px;
    font-weight: bold;
  }

  .list-items {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;
    border-bottom: 1px solid #eaebec;
    padding: 15px 0;

    .right-content {
      margin-left: 20px;
      margin-top: -15px;
      flex: 1 1 auto;
      position: relative;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;

        .nick-name {
          color: #65a13b;
        }

        .time {
          position: absolute;
          top: -3px;
          right: 0px;
          color: @gray;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
